<template>
  <div>
    <div class="u-page web">
      <!--    作业页面头部-->
      <homework-header :item="item"
                       :finished="finished"
                       :if-write="ifWrite"
                       :stu="stu"
                       :homework="homework"/>


      <div class="content-container">
        <!--    未提交作业时，查看老师布置的作业详情-->
        <div class="studetail-zone0" v-show="finished === 0">
          <div>
            <div>
              <div class="evaluate-type tea-evaluate"
                   style="margin-top: 20px">
                <p class="evaluate-agent">
                  作业详情
                  <span class="time">{{homework.startTime}}</span>
                </p>
                <p class="evaluate-result">
                  <homework-detail :homework="homework"
                                  :if-context="ifContext"/>
                </p>

              </div>
            </div>
            <div class="write">
              <div class="write-homework">
                <button class="btn button button-red-solid"
                        v-show="stu.status === 1"
                        @click="write">写作业
                </button>
                <button class="btn button button-red-solid"
                        v-show="stu.status === 0">未开始
                </button>
                <button class="btn button button-red-solid"
                        v-show="stu.status === 2">已结束
                </button>
              </div>
            </div>
          </div>
        </div>

        <!--    作业已批阅,可以查看成绩-->
        <div class="studetail-zone" v-show="finished === 2">
          <div>
            <div>
              <div class="tea-evaluate__header zh-zone">
                <div class="resultscore-wrap">
                  <div>
                    <span class="stu-score">{{ data.score }}</span>
                    <span class="work-score">满分100</span>
                  </div>
                </div>
              </div>
              <div class="evaluate-type tea-evaluate">
                <p class="evaluate-agent">
                  教师评价
                  <span class="time">2023-06-10 23:29</span>
                </p>
                <p class="evaluate-result evaluate-score">
                  评分：{{ data.score }}分
                </p>
                <p class="evaluate-result">
                  评语：
                  <span>{{ data.remarks === null?"无":data.remarks }}</span>
                </p>
              </div>
            </div>
            <p class="stuwork_subnav stuwork_gap">
              我的作业
              <span class="time">{{ createTime }}</span>
            </p>
            <div class="stuworkdetails-zone stuwork_detail">
              <div class="file-wrap" v-show="data.context !== ''">
                {{ data.context }}
              </div>
              <div class="file-wrap">
                 <span class="title">
                <i class="iconfont icon-fujian"></i>
                附件
                </span>
                <div class="attach-previtem"
                     @mouseleave="mouseleave()"
                     @mouseover="mouseover()"
                     v-for="item in stuData">
                  <div>
                    <div class="file-attachwarp canPreview">
                      <div class="file-info">
                        <div class="file-filetype fileicon_image">
                          <div class="image-wrap">
                            <div v-show="item.type === 'docx' || item.type === 'doc'"
                                 class="file-filetype iconfont icon-word1"></div>
                            <img v-if="item.type === 'jpg' || item.type === 'png' || item.type === 'jpeg'"
                                 alt="" :src="`/api/student/download?name=${item.annex}`"/>
                          </div>
                        </div>
                        <div class="file-attachmain">
                          <p style="margin-top: 0;margin-bottom: 8px">{{ item.name }}</p>
                          <p style="margin-top: 0">{{ item.size }}MB</p>
                        </div>
                        <div class="file-action"
                             :style="cDisplay">
                          <span class="preview" @click="previewMy(item.annex,item.type,item.name)">预览</span>
                          <a style="color: #8d77fb"
                             :href="imageHref"
                             :download="item.name"
                             @click="downlink(item.annex)">下载</a>

                        </div>
                      </div>
                    </div>
                  </div>


                </div>
              </div>

            </div>
          </div>
        </div>

        <!--    作业已提交,但未批阅-->
        <div class="studetail-zone" v-show="finished === 1">
          <div class="worktip">
            <i class="iconfont el-icon-circle-check"></i>
            <p class="coreinfo">作业已提交，等待评分中</p>
          </div>
          <div>
            <p class="stuwork_subnav stuwork_gap">
              我的作业
              <span class="time">{{ createTime }}</span>
            </p>
            <div style="margin-top: 20px;">
              <button class="button revocation-btn" @click="revocation">撤回</button>
              <button class="button update-btn" @click="update">修改</button>
            </div>
            <div class="stuworkdetails-zone stuwork_detail">
              <div class="file-wrap" v-show="data.context !== ''">
                {{data.context}}
              </div>
              <div class="file-wrap">
                 <span class="title">
                <i class="iconfont icon-fujian"></i>
                附件
                </span>
                <div class="attach-previtem"
                     @mouseleave="mouseleave()"
                     @mouseover="mouseover()"
                     v-for="item in stuData">
                  <div>
                    <div class="file-attachwarp canPreview">
                      <div class="file-info">
                        <div class="file-filetype fileicon_image">
                          <div class="image-wrap">
                            <div v-show="item.type === 'docx' || item.type === 'doc'"
                                 class="file-filetype iconfont icon-word1"></div>
                            <img v-if="item.type === 'jpg' || item.type === 'png' || item.type === 'jpeg'"
                                 alt="" :src="`/api/student/download?name=${item.annex}`"/>
                          </div>
                        </div>
                        <div class="file-attachmain">
                          <p style="margin-top: 0;margin-bottom: 8px">{{ item.name }}</p>
                          <p style="margin-top: 0">{{ item.size }}MB</p>
                        </div>
                        <div class="file-action"
                             :style="cDisplay">
                          <span class="preview" @click="previewMy(item.annex,item.type,item.name)">预览</span>
                          <a style="color: #8d77fb"
                             :href="imageHref"
                             :download="item.name"
                             @click="downlink(item.annex)">下载</a>

                        </div>
                      </div>
                    </div>
                  </div>


                </div>
              </div>

            </div>
          </div>
        </div>
      </div>


      <!--    作业word文档浏览-->
      <el-dialog class="el-dialog__wrapper previewDialog filePreviewDialog"
                 :visible.sync="showIframe"
                 style="background-color: rgb(0, 0, 0); z-index: 2007;">
        <div class="viewfile-wrap">
          <div class="viewfile-zone">
            <div ref="word"></div>
          </div>
        </div>
      </el-dialog>

      <!--      图片浏览作业提交后附件浏览-->
      <el-dialog class="el-dialog__wrapper previewDialog filePreviewDialog"
                 :visible.sync="showImage"
                 :title="dialogTitleName"
                 style="background-color: rgb(0, 0, 0); z-index: 2005">
        <div class="img-zone">
          <img alt="" :src="imageSrc"/>
        </div>
      </el-dialog>


    </div>
  </div>
</template>

<script>
import HomeworkHeader from '@/components/headers/HomeworkHeader'
import {homeworkStuGet} from "@/apis/student";
import {homeworkTeaGet} from "@/apis/teacher";
import {stuPreviewShow} from "@/apis/student";
import HomeworkDetail from '@/views/teacher/component/HomeworkDetail'
import {homeworkStuRevocation} from "@/apis/student";


const docx = require("docx-preview");
window.JSZip = require("jszip");
export default {
  components: {
    HomeworkHeader,
    HomeworkDetail,
  },
  props: {},
  data() {
    return {
      item: {},
      stu: [],
      ifContext: true,
      cDisplay: 'display: none',
      showIframe: false,
      showImage: false,
      src: '',
      annex: '',
      dialogTitleName: '',
      imageSrc: '',
      imageHref: '',
      // annex: 'https://docs.ulearning.cn/?i=16664&ssl=1&furl=https%3A%2F%2Fobscloud.ulearning.cn%2Fresources%2Fweb%2F16856858804472648.docx',
      // annex: 'https://obscloud.ulearning.cn/resources/android/h5/9254483_20231210191047102.jpg?imageslim|imageView2/0/w/1000/h/1000',
      finished: 0,
      ifWrite: false,
      stuData: [],
      data: [],
      createTime: '',
      homework: {},
    }
  },
  created() {

    this.init()
  },

  methods: {
    async init() {

      this.item = JSON.parse(this.$route.query.item)
      this.stu = JSON.parse(this.$route.query.stu)
      this.ifWrite = this.$route.meta.if_write
      console.log(this.stu)
      let table = {
        name: this.stu.name,
        creator: this.stu.creator,
        courseId: this.item.id,
        studentId: localStorage.getItem("id")
      }
      // 获取学生作业信息
      homeworkStuGet(table).then(resp => {
        if (resp?.data?.code === 1) {
          // 获取作业状态
          this.finished = resp?.data?.data?.status
          // 赋值
          this.stuData = resp?.data?.data?.files
          this.data = resp?.data?.data
          this.createTime = resp?.data?.data?.createTime

        }
      })

      // 获取老师布置作业详情信息
      let data = {
        courseId: this.item.id,
        name: this.stu.name,
        creator: this.stu.creator,
      }
      homeworkTeaGet(data).then(resp => {
        if (resp?.data?.code === 1) {

          this.homework = resp?.data?.data
        } else {
          this.$message.error(resp?.data?.msg)
        }
      })


    },



    // 撤销
    revocation(){
      let data ={
        studentId: localStorage.getItem("id"),
        name: this.stu.name,
        creator: this.stu.creator,
        courseId: this.item.id,
      }
      homeworkStuRevocation(data).then(resp => {
        if(resp?.data?.code === 1){
          location.reload()
        }else{
          this.$message.error(resp?.data?.msg)
        }

      })

    },
    // 修改
    update(){
      let data ={
        data: this.data,
      }
      this.$router.push({
        name: 'stuHomeworkWrite',
        query: {
          item: JSON.stringify(this.item),
          stu: JSON.stringify(this.stu),
          homework: JSON.stringify(this.homework),
          data: JSON.stringify(data),
        }
      }).catch(r => console.log(r))
    },
    // 切换到写作业页面
    write() {
      // 表头返回按钮地址的切换
      this.ifWrite = true
      this.$router.push({
        name: 'stuHomeworkWrite',
        query: {
          item: JSON.stringify(this.item),
          stu: JSON.stringify(this.stu),
          homework: JSON.stringify(this.homework),
        }
      }).catch(r => console.log(r))
    },
    // 预览我的作业
    previewMy(annex, type,name) {
      if (type === 'docx' || type === 'doc') {
        this.showIframe = true
        stuPreviewShow(annex).then(({data}) => {
          docx.renderAsync(data, this.$refs.word)
        })
      } else if (type === 'jpg' || type === 'jpeg' || type === 'png') {
        this.showImage = true
        this.imageSrc = `/api/student/download?name=${annex}`
        this.dialogTitleName = name
      }

    },
    // 预览
    preview(annex) {

    },
    // 下载
    downlink(annex) {
      this.imageHref = './download_doc/doc/' + annex
      console.log(this.imageHref)
    },
    // 鼠标悬浮切换
    mouseover() {
      this.cDisplay = 'display: block '
    },
    mouseleave() {
      this.cDisplay = 'display: none '
    }
  }
}
</script>

<style scoped>


div {
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  unicode-bidi: isolate;
}

.content-container {
  width: 1020px !important;
  position: relative;
  margin: 20px auto 0;
  background: #fff;
}

.studetail-zone {
  width: 1020px;
  font-size: 14px;
  background-color: #fff;
  border: 1px solid #e3e3e9;
  border-bottom: none;
  padding-bottom: 8px;
}

.studetail-zone0 {
  width: 1020px;
  font-size: 14px;
  background-color: #fff;
  border-top: 8px solid #ea5947;
  border-radius: 4px;
  border-bottom: none;
  padding-bottom: 8px;
}

.tea-evaluate__header {
  padding: 20px 16px;
}

.resultscore-wrap {
  display: inline-block;
}

.stu-score {
  font-size: 50px;
  color: #ea5947;
  margin-right: 10px;
}

.work-score {
  margin-right: 10px;
  font-size: 14px;
  color: #969696;
}

.evaluate-type {
  border-bottom: 1px #e3e3e9 solid;
}

.evaluate-type:last-child {
  position: relative;
  margin-bottom: 0;
  padding-bottom: 16px;
}

.evaluate-agent {
  margin-top: 0;
  border-left: 3px solid #ea5947;
  font-size: 16px;
  line-height: 1;
  color: #ea5947;
  padding: 4px 16px;
  margin-bottom: 16px;
}

.time {
  float: right;
  font-size: 14px;
  line-height: 1;
  color: #969696;
}

.evaluate-score {
  color: #969696 !important;
  vertical-align: middle;
  font-size: 14px;
  padding: 4px 20px;
}

.evaluate-result {
  margin: 0;
  color: #444;
  font-size: 14px;
  padding: 4px 20px;
}

.evaluate-result span {
  line-height: 1.4;
  word-break: break-word;
  white-space: pre-wrap;
  vertical-align: middle;
}

.stuwork_subnav {
  margin-bottom: 0;
  border-left: 3px solid #ea5947;
  font-size: 16px;
  line-height: 1;
  color: #ea5947;
  padding: 4px 16px;
}

.stuwork_detail {
  padding: 10px 20px;
  font-size: 14px;
  color: #444;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
  -webkit-user-select: auto;
}

.file-wrap {
  background: #f3f3f3;
  padding: 14px 16px;
}

.title {
  font-weight: bold;
  font-size: 18px;
  color: #444;
  letter-spacing: 0;
}

.iconfont {
  margin-right: 6px;
  font-size: 18px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.attach-previtem {
  margin-top: 10px;
}

.file-attachwarp {
  border: 0;
  padding: 10px 0;
  zoom: 1;
  border-radius: 4px;
  cursor: pointer;
}

.file-info {
  cursor: pointer;
  overflow: hidden;
}

.file-filetype {
  font-size: 37px;
  float: left;
  margin-right: 10px;
  color: #529fff;
  display: inline-block;
}

.file-attachmain {
  padding-right: 20px;
  float: left;
  max-width: 400px;
}

.name {
  margin-top: 0;
  font-size: 14px;
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}

.size {
  margin-top: 0;
  margin-bottom: 0;
  color: #969696;
}

.file-action {
  float: left;
  font-size: 12px;
  color: #8d77fb;
  position: relative;
  line-height: 22px;
}


.file-action span {
  margin-right: 10px;

}

.viewfile-wrap {
  background: #fff;
}

.viewfile-zone {
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;
  border: 1px solid #e3e3e9;
}

::v-deep .el-dialog {
  margin-top: 5vh !important;
  width: 100%;
  position: relative;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  box-sizing: border-box;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

::v-deep .el-dialog__header {
  padding: 20px;
  padding-bottom: 10px;
}


::v-deep .el-dialog__body {
  color: #606266;
  line-height: 24px;
  font-size: 14px;
  padding: 30px 20px;
}

.write {

}

.write-homework {
  width: 100%;
  height: auto;
  margin: 10px 0;
}

.button {
  margin-left: 18px;
}

.worktip {
  width: 100%;
  color: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 32px;
  font-size: 14px;
  padding: 10px;
  background-color: #fc0;
  text-align: center;
}

.iconfont {
  margin-right: 5px;
}

.coreinfo {
  display: inline;
}

.attach-previtem {
  margin-top: 10px;
}

.file-attachwarp {
  border: 0;
  padding: 10px 0;
}

.file-info {
  cursor: pointer;
  overflow: hidden;
}

.image-wrap {
  width: 42px;
  height: 42px;
  line-height: 52px;
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  background-size: 100% 100%;
}

.file-attachmain {
  padding-right: 20px;
  float: left;
  max-width: 300px;
}
.revocation-btn{
  background-color: white;
  border: 1px #969696 solid;
  color: #409EFF;
}
.revocation-btn:hover{
  border: 1px #409EFF solid;
}

.update-btn:hover {
  background-color: rgba(233,56,34,0.68);
}
</style>